<template>
  <div class="createCon">
    <yes-tabs
      class="marBtm"
      :tab-list="tabList"
      :active.sync="activeTabName"
      @tab-click="handleClick"
    />
    <component :is="activeTabName" class="container" />
  </div>
</template>

<script>
import YesTabs from '@/components/YesTabs'
import Pagination from '@/components/Pagination'
import TEACHING_DESIGN from './list/designList'
import ARTICEL from './list/articel'
import MATERIAL from './list/material'
import TEACHINGRESEARCH from './list/reportList'
export default {
  name: 'CreateResult',
  components: {
    YesTabs,
    Pagination,
    TEACHINGRESEARCH,
    TEACHING_DESIGN,
    ARTICEL,
    MATERIAL
  },
  data () {
    return {
      total: 1,
      state: '',
      activeTabName: 'TEACHINGRESEARCH',
      tabList: [{
        label: '教研报告',
        name: 'TEACHINGRESEARCH'
      },
      {
        label: '教学设计',
        name: 'TEACHING_DESIGN'
      }
        // {
        //   label: '文章',
        //   name: 'ARTICEL'
        // },
        // {
        //   label: '资源',
        //   name: 'MATERIAL'
        // }
      ],
      }
  },
  computed: {

  },
  watch: {
    $route: {
      handler: function (route) {
        // this.initDate(this.activeKeyFn)
        // this.activeTabName = route.query && route.query.tab ? route.query.tab : this.tabList[0].name
      },
      immediate: true
    },
    activeTabName: {
      handler: function (val) {
        // this.initDate(this.activeKeyFn)
      },
      immediate: true
    }
  },
  mounted () {
  },
  created () {
     },
  methods: {
    handleClick (tab, e) {
      console.log(tab, e)
      this.activeTabName = tab.name
    }
  }
}
</script>
<style lang="scss" scoped>
.searchBox {
  padding: 24px 40px;
  padding: 10px;
}
</style>
